<template>
	<view class="page">
		<view class="order_nav">
			<view v-for="(item, index) in navList" :key="index" @tap="bindSetIndex(index)" class="order_nav_item f_26" :class="[navIndex == index?'f_6':'']">
				{{ item }}
				<text v-if="navIndex == index" class="active"></text>
			</view>
		</view>
		<view class="order_list">
			<view v-for="(itemy, indey) in orderList" :key="indey" class="order_item" @tap="bindBtn(itemy,5,indey)">
				<view class="order_top dis-flex flex-x-between flex-y-center">
					<text :class="['order_state', 'f_28', setOrderTitleColor(itemy.status)]">{{ setOrderTitle(itemy.status) }}</text>
					<text class="gery1 f_24">{{ itemy.createtime }}</text>
				</view>
				<view class="order_center flex-y-center">
					<image class="order_img m_r_24" :src="itemy.teacher!=null?itemy.teacher.headeravatar:imgPrefix('/static/image/icon/default_avatar.png')" mode="aspectFill"></image>
					<view class="order_info">
						<view class="course_title f_5">{{itemy.language_grade}}{{ itemy.language }}{{ itemy.teacher!=null?itemy.teacher.nickname:'' }}</view>
						<view class="course_info">
							<text class="course_name">{{ itemy.classdata==1?'教师上门':'学生上门' }}</text>
							<!-- <text class="teacher_info">类型</text> -->
							<text class="course_num ">
								共计
								<text class="navy_blue">{{ itemy.num }}</text>
								课次，
								<text class="navy_blue">{{ itemy.hour }}</text>
								课时
							</text>
						</view>
					</view>
				</view>
				<view class="order_bottom dis-flex flex-x-between">
					<text v-if="itemy.status==1" class="dis-flex flex-y-between">
						<text class="navy_blue f_24">应付款：</text><text class="orange f_24">￥</text><text class="orange f_32">{{itemy.total_price}}</text>
					</text>
					<!-- <text v-else-if="itemy.status==2||itemy.status==3" class="f_24">课程进度{{ itemy.nowNum }}/{{ itemy.allNum }}</text> -->
					<text v-else></text>
					<view class="order_btns dis-flex f_24 f_5">
						<view @tap.stop="bindBtn(itemy,0,indey)" v-if="itemy.status==0||itemy.status==1||(itemy.status==3&&itemy.is_comment==1)||itemy.status==5||itemy.status==6" class="order_btn navy_blue">删除订单</view>
						<view @tap.stop="bindBtn(itemy,1,indey)" v-else-if="itemy.status==4" class="order_btn navy_blue">取消申请</view>
						<view @tap.stop="bindBtn(itemy,2,indey)" v-else-if="itemy.status==2" class="order_btn navy_blue">申请退款</view>
						<view @tap.stop="bindBtn(itemy,itemy.status==4?1:3,indey)" v-else-if="(itemy.status==3&&itemy.is_comment==0)||itemy.status==4" class="order_btn border_btn_view">{{itemy.status==4?'取消申请':'去评论'}}</view>
						<view class="order_btn" @tap.stop="bindBtn(itemy,itemy.status==1?4:5,indey)">
							{{itemy.status==1?'去付款':'查看详情'}}</view>
					</view>
					<!-- ((itemy.status==1)?(bindPay(itemy,indey)):(pageTo('/pages/order_detail/index', { orderId: itemy.course_order_id }))) -->
				</view>
			</view>
			<load-more :status="loadingStatus" text="暂无订单" defaultIcon="1"></load-more>
		</view>
	</view>
</template>
<script>
const app = getApp();
import { commonMixinFun } from '@/static/mixins/common.js'; // 公共
import API from '@/static/api/index.js';

import loadMore from '@/components/loadmore/index.vue';
import uniPay from '@/static/uitls/uniPay.js'
export default {
	mixins: [commonMixinFun],
	components: {
		loadMore
	},
	data() {
		return {
			navList: ['全部', '待支付', '待上课', '已完成', '取消/退款'],
			//标题栏状态：1-待付款，2-待上课，3-已完成，4-取消/退款，其他-全部
			// 订单状态:0=已取消,1=待付款,2=待上课,3=已完成,4=申请退款中,5=拒绝退款,6=同意退款
			navIndex: 0,
			num: 1,
			size: 10,
			tools: 0,
			isRequest: false,
			orderList: [],
			loadingStatus: 'loading'
		};
	},
	watch: {
		navIndex(val, oldVal) {
			console.log(782)
			if(this.num!=1){
				this.num = 1;
			}else{
				this.isRequest = false;
				this.getOrderList();
			}
		},
		num(val, oldVal) {
			console.log(77482)
			this.getOrderList();
		}
	},
	onShow() {
		this.getOrderList();
	},
	methods: {
		// 点击订单按钮
		bindBtn(item,type,index){
			console.log(item,type,index)
			if(type==0){
				console.log('删除订单')
				uni.showModal({
					content:'是否删除订单？',
					success: (res) => {
						if(res.confirm){
							API.orderRefundDelete(item.course_order_id).then(res=>{
								if(res.code==1){
									let {orderList}=this;
									console.log(orderList)
									// this.navIndex=navIndex;
									this.showToast('删除成功');
									console.log("index:::",index)
									orderList = orderList.splice(index,1);
								}else{
									this.showToast(res.msg||'请稍后重试')
								}
							}).catch(res=>{
								this.showToast('请稍后重试')
							})
						}
					}
				})
			}else if(type==1){
				console.log('取消申请')
				uni.showModal({
					content:'是否取消退款？',
					success: (res) => {
						if(res.confirm){
							API.orderRefundCancel(item.refund.course_refund_id).then(res=>{
								if(res.code==1){
									this.showToast('取消成功');
									this.orderList[index].status=2;
									this.getOrderList()
								}else{
									this.showToast(res.data.msg||'请稍后重试')
								}
							}).catch(res=>{
								this.showToast('请稍后重试')
							})
						}
					}
				})
			}else if(type==2){
				console.log('申请退款')
				this.pageTo('/pages/refund/index',{orderId:item.course_order_id})
			}else if(type==3){
				console.log('去评论')
				this.pageTo('/pages/comment/index',{course_order_id:item.course_order_id})
			}else if(type==4){
				console.log('去付款')
				// console.log(item.course_order_id,index)
				this.pageTo('/pages/order_detail/index', { orderId: item.course_order_id,showPay:true})
			}else if(type==5){
				console.log('订单详情')
				this.pageTo('/pages/order_detail/index', { orderId: item.course_order_id })
			}
		},
		bindSetIndex(index) {
			this.navIndex = index;
		},
		getOrderList() {
			let { isRequest, num, size, orderList, navIndex } = this;
			if (!isRequest) {
				this.isRequest=true
				this.loadingStatus = 'loading';
				API.getOrderList(num, size, navIndex)
					.then(res => {
						console.log(res);
						let { code, data } = res;
						if (code == 1) {
							let list = num == 1 ? data.orders : orderList.concat(data.orders);
							this.orderList = list;
							this.tools = data.total;
							console.log('订单数量', list.length, data.total);
							this.loadingStatus = list.length >= data.total ? 'nomore' : 'getmore';
						} else {
							this.loadingStatus = code == 405 ? (num == 1 ? 'empty' : 'nomore') : 'error';
							if (num == 1) {
								this.orderList = [];
								this.tools = 0;
							}
						}
						this.isRequest=false
					})
					.catch(err => {
						this.isRequest=false
						this.loadingStatus = 'error';
						this.orderList = [];
						this.num = 1;
					});
			}
		},
		// 设置订单标题文本
		setOrderTitle(state) {
			let text = '';
			if (state == 0) {
				text = '课程已取消';
			} else if (state == 1) {
				text = '待支付';
			} else if (state == 2) {
				text = '课程进行中';
			} else if (state == 3) {
				text = '课程已完成';
			} else if (state == 4) {
				text = '申请退款中';
			} else if (state == 5) {
				text = '拒绝退款';
			} else if (state == 6) {
				text = '课程已退款';
			}
			return text;
		},
		// 设置订单标题颜色
		setOrderTitleColor(state) {
			let color = '';
			if (state == 0) {
				// 已取消
				color = 'gery1';
			} else if (state == 1) {
				// 待付款
				color = 'orange';
			} else if (state == 4) {
				//申请退款中
				color = 'red';
			} else if(state == 2) {
				//课程进行中
				color = 'violet';
			} else if (state == 3) {
				color = 'navy_blue';
			} else if (state == 5 || state == 6) {
				color = 'navy_blue';
			}
			return color;
		}
	},
	onReachBottom() {
		let { isRequest, num, tools, orderList } = this;
		if (!isRequest && (num == 1 || orderList.length < tools)) {
			this.num += 1;
		}
	}
};
</script>

<style lang="scss">
$orange: #ff6f03; // 橙色
$violet: #7f4aff; // 紫色
.orange {
	color: $orange;
}
.violet {
	color: $violet;
}
.order_ {
	&nav {
		position: fixed;
		left: 0rpx;
		top: 0rpx;
		width: 750rpx;
		height: 92rpx;
		background-color: #f8f8f8;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 48rpx;
		.order_nav_item {
			position: relative;
			.active {
				display: block;
				width: 24rpx;
				height: 4rpx;
				border-radius: 2rpx;
				position: absolute;
				bottom: -8rpx;
				left: calc(50% - 12rpx);
				background-image: linear-gradient(180deg, #a977ff 0%, #7f4aff 100%);
			}
		}
	}
	&list {
		padding: 100rpx 48rpx 0;
		.order_ {
			&item {
				width: 654rpx;
				background-color: #ffffff;
				border-radius: 24rpx;
				padding: 16rpx 24rpx 24rpx;
				box-sizing: border-box;
				margin-bottom: 24rpx;
			}
			&top {
				padding-bottom: 16rpx;
				border-bottom: 1rpx solid  rgba(204, 204, 204, 0.5);
			}
			&center {
				display: flex;
				margin: 25rpx 0 25rpx;
				.order_img {
					width: 96rpx;
					height: 96rpx;
					border-radius: 16rpx;
					border: solid 2rpx #ffffff;
				}
				.order_info {
					.course_title {
						font-size: 32rpx;
						line-height: 44rpx;
						color: #252748;
					}
					text {
						line-height: 34rpx;
						font-size: 24rpx;
						color: #8f8f9a;
					}
					.teacher_info {
						margin-bottom: 8rpx;
					}
					.course_num {
						margin-left: 16rpx;
					}
				}
			}
			&bottom {
				border-top: 1rpx solid  rgba(204, 204, 204, 0.5);
				align-items: flex-end;
				.order_btns {
					padding-top: 24rpx;
					.order_btn {
						width: 160rpx;
						height: 66rpx;
						background-color: #f0f0f6;
						border-radius: 16rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						&:last-child {
							margin-left: 24rpx;
							background-image: linear-gradient(270deg, #7f4aff 0%, #9254ff 100%);
							color: #fff;
						}
						&.border_btn_view{
							background-color: #ffffff;
							color: #7f4aff;
							border: solid 1.6rpx #7f4aff;
						}
					}
				}
			}
		}
	}
}
</style>
